﻿<template>
    <div id="app">
        <div class="table-wraper">
            <div class="search">
                <div class='selectOption'>
                    <el-button type="success" class='checkBtn' @click='openAppendBox'>添加消息</el-button>
                </div>
            </div>
            <div class="main">
                <ul class="listTitle">
                    <li v-for='item in listTitle'>{{item.label}}</li>
                </ul>
                <ul class="dataList" v-for='(item,index) in tableData'>
                    <li>{{index+1}}</li>
                    <li>{{item.messageType | messageType}}</li>
                    <li>{{item.sendTime | formatDate}}</li>
                    <li>{{item.sendObj}}</li>
                    <li>{{item.sendCount}}</li>
                    <li>{{item.readCount}}</li>
                    <li @click='openDetailMsg(index)'>{{item.content}}</li>
                    <li>
                        <el-button type="primary" v-show='item.sendBtn' @click='openSendBox(index)'>发送</el-button>
                        <el-button type="danger" v-show='item.deletBtn' @click='delet(index)'>删除</el-button>
                    </li>
                </ul>
            </div>
            <div class="block pagination" v-show='nullContentPagination'>
                <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <div class="nullContent" v-show='nullContent'>暂无数据</div>
        </div>
        <div class="bomb sendWraper" v-show='sendWraper'>
            <div class="bomb_header">
                <p>发布消息</p>
                <span @click="hideSendBox"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span>
            </div>
            <div class="bomb_content">
                <div class="send_wraper">
                    <div class="timeType">
                        <span>发送时间 : </span>
                        <el-select v-model="sendTimeType" placeholder="请选择发送时间">
                            <el-option v-for="item in selectTimeType" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <el-date-picker v-model="selectTime" type="datetime" placeholder="选择发送时间" :picker-options="pickerOptions0" v-show='isSelectTime'></el-date-picker>
                    </div>
                    <div class="peopleType">
                        <span>选择人群 : </span>
                        <el-select v-model="sendPeopleType" placeholder="请选择发送人群">
                            <el-option v-for="item in selectPeopleType" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <div class="peopleInfo" v-show='isShowPeopleInfo'>
                            <p>
                                <span>用户性别 : </span>
                                <el-select v-model="sexType" placeholder="请选择用户性别">
                                    <el-option v-for="item in selectSexType" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </p>
                            <p>
                                <span>用户设备 : </span>
                                <el-select v-model="deviceType" placeholder="请选择用户设备">
                                    <el-option v-for="item in selectDeviceType" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </p>
                            <p>
                                <span>用户区域 : </span>
                                <el-cascader v-model="addressType" expand-trigger="hover" :options="addressData" clearable> </el-cascader>
                            </p>
                            <div class="clear"></div>
                            <div class="selectInterest">
                                <p><span>用户兴趣 : </span>
                                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                </p>
                                <div class="interestBox">
                                    <el-checkbox-group v-model="checkedIntersets" @change="handleCheckedCitiesChange">
                                        <el-checkbox v-for="item in interests" :label="item" class='checkList'>{{item}}</el-checkbox>
                                    </el-checkbox-group>
                                    <div class="nullContent" v-show='interestNull'>暂无数据</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sendType">
                        <span>发送方式 : </span>
                        <el-select v-model="sendType" placeholder="请选择发送方式">
                            <el-option v-for="item in selectSendType" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="bomb_footer">
                <input type="button" @click="sendMessage" value="发送">
                <input type="button" @click="hideSendBox" value="取消">
            </div>
        </div>
        <div class="bomb appendBox" v-show='isShowAppendBox'>
            <div class="bomb_header">
                <p>添加消息</p>
                <span @click="hideAppendMsg()">
                            <img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10">
                            </span>
            </div>
            <div class="bomb_content">
                <p class="tabSelect">
                    <button v-bind:class="{'tabButton':isTabButton1}" @click='tabBtnChange(1)'>文字</button>
                    <button v-bind:class="{'tabButton':isTabButton2}" @click='tabBtnChange(2)'>图片</button>
                </p>
                <p class='tabTitle'>
                    <span>通知栏标题：</span>
                    <el-input v-model="appendTitle" placeholder="请输入通知栏标题(选填)"></el-input>
                </p>
                <div class="inputTxt" v-show='isTxt'>
                    <el-input type="textarea" :rows="11" placeholder="请输入内容" v-model="textarea" resize='none' icon="edit"> </el-input>
                </div>
                <p class="inputImg" v-show='isImg'>
                    <span>选择图片：</span>
                    <input type="file" id='upload' style="display:none" @change="onFileChange">
                    <img :src="image" class="previewImage" @click='selectFile'>
                </p>
            </div>
            <div class="bomb_footer">
                <input type="button" @click="saveMessage" value="保存">
                <input type="button" @click="hideAppendMsg" value="取消">
            </div>
        </div>
        <div class="layer" v-show='layer'></div>
    </div>
</template>

<script>
    import {
        mapActions,
        mapState
    } from 'vuex'
    // 导入地址数据
    import addressData from '../../assets/js/addressData.js'
    // 加载地址数据
    function formatData(data) {
        return data
    }
    export default {
        data() {
            return {
                listTitle: this.$store.state.systemMsg.listTitle,
                selectTimeType: this.$store.state.systemMsg.selectTimeType,
                selectSendType: this.$store.state.systemMsg.selectSendType,
                selectPeopleType: this.$store.state.systemMsg.selectPeopleType,
                selectSexType: this.$store.state.systemMsg.selectSexType,
                selectDeviceType: this.$store.state.systemMsg.selectDeviceType,
                tableData: [],
                userDetial: [],
                interests: [],
                checkedIntersets: [],
                addressData: formatData(addressData),
                currentPage: 1,
                total: 0,
                nullContent: false,
                nullContentPagination: true,
                interestNull: false,
                layer: false,
                sendBtn: false,
                deletBtn: false,
                sendWraper: false,
                isSelectTime: false,
                isShowPeopleInfo: false,
                isShowAppendBox: false,
                sendTimeType: 1,
                sendPeopleType: 3,
                sexType: '',
                addressType: [],
                sendType: 5,
                deviceType: 3,
                appendTitle: '',
                selectTime: '',
                imageUrl: '',
                textarea: '',
                image: '../../../static/img/icon_xinjian_picture@2x.png',
                checkAll: true,
                isTabButton1: true,
                isTabButton2: false,
                isTxt: true,
                isImg: false,
                appenMessageType: 1,
                isIndeterminate: true,
                messageId: '',
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
            }
        },
        watch: {
            sendTimeType: function(i) {
                if (i == 1) {
                    this.isSelectTime = false;
                } else {
                    this.isSelectTime = true;
                }
            },
            sendPeopleType: function(i) {
                if (i == 2) {
                    this.isShowPeopleInfo = true;
                } else {
                    this.isShowPeopleInfo = false;
                }
            }
        },
        methods: {
            // 获取系统消息
            getMsg(i) {
                this.$store.commit('showLoading');
                this.currentPage = i;
                this.tableData = [];
                let list = {
                    token: sessionStorage.token,
                    pageNo: i,
                    pageSize: 10
                }
                this.getSystemMsg(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.nullContent = false;
                        this.nullContentPagination = true;
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                            this.nullContentPagination = false;
                            this.tableData = data.data.list;
                            return;
                        }
                        this.total = data.data.count;
                        let listData = data.data.list,
                            target, sex, area, silenceUser, allPeople;
                        for (let i = 0; i < listData.length; i++) {
                            if (listData[i].target == 1) {
                                target = "设备:android ";
                            } else if (listData[i].target == 2) {
                                target = "设备:ios ";
                            } else if (listData[i].target == 3) {
                                target = "设备:android和ios";
                            } else {
                                target = "";
                            }
                            if (listData[i].params) {
                                let params = JSON.parse(listData[i].params);
                                if (params) {
                                    if (params.sex) {
                                        if (params.sex == "m") {
                                            sex = "性别:男";
                                        } else if (params.sex == "w") {
                                            sex = "性别:女";
                                        } else {
                                            sex = "所有用户";
                                        }
                                    } else {
                                        sex = "所有用户";
                                    }
                                    if (params.address) {
                                        area = "区域:" + params.address; //区域
                                    } else {
                                        area = "";
                                    }
                                    if (params.silenceUser) {
                                        silenceUser = "所有沉默用户"; //沉默用户
                                    } else {
                                        silenceUser = "";
                                    }
                                }
                                if (sex == "" && area == "" && silenceUser == "") {
                                    allPeople = "所有用户";
                                } else {
                                    allPeople = "";
                                }
                                listData[i].sendObj = allPeople + " " + sex + " " + area + " " + silenceUser + " " + target;
                            } else {
                                listData[i].sendObj = "全部用户 " + target;
                            }
                            if (listData[i].state == 0) {
                                listData[i].sendBtn = true;
                                listData[i].deletBtn = true;
                            } else {
                                listData[i].sendBtn = false;
                                listData[i].deletBtn = true;
                            }
                        }
                        this.tableData = data.data.list;
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 获取兴趣列表
            getIntrest() {
                let list = {
                    dictType: 'interest',
                    appId: 'com_sxluckyking_double',
                    token: sessionStorage.token,
                }
                this.getIntrestlist(list).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        if (data.data[0].children.length == 0) {
                            this.interestNull = true;
                        }
                        for (let i = 0; i < data.data[0].children.length; i++) {
                            this.interests.push(data.data[0].children[i].dictValue)
                        }
                    } else {
                        this.$message(data.message);
                        this.interestNull = true;
                    }
                }).catch(msg => console.log(msg));
            },
            // 删除消息操作
            delet(i) {
                this.$confirm('此操作将永久删除该系统消息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deletMsg(i);
                }).catch(() => {});
            },
            // 删除消息
            deletMsg(i) {
                let id = this.tableData[i].id;
                this.$store.commit('showLoading');
                this.deletSystemMsg(id).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('删除成功!');
                        this.getMsg(this.currentPage);
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 格式化日期
            formatDate(date) {
                let y, m, d, h, i, s,
                    t = new Date(parseInt(date));
                y = t.getFullYear()
                m = t.getMonth() + 1
                d = t.getDate()
                h = t.getHours()
                i = t.getMinutes()
                s = t.getSeconds()
                return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
            },
            // 分页
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getMsg(val)
            },
            // 选择图片上传
            onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!/\.(jpg|jpeg|png|gif)$/i.test(files[0].name) || !files.length) {
                    this.$message.warning('请选择正确图片格式!');
                    return;
                }
                this.uploadImage(files[0]);
            },
            // 上传图片
            uploadImage(file) {
                var formdata = new FormData();
                formdata.append('appId', "com_sxluckyking_double");
                formdata.append('appName', 'file');
                formdata.append('file', file);
                this.uploadFile(formdata).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('上传成功!');
                        this.image = data.data[0].path;
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            // 保存消息
            saveMessage() {
                if (this.appenMessageType == 1) {
                    if (this.textarea == '') {
                        this.$message.warning('请输入内容!');
                        return;
                    } else {
                        var list = {
                            token: sessionStorage.token,
                            messageType: this.appenMessageType,
                            content: this.textarea
                        }
                        if (this.appendTitle != '') {
                            list.title = this.appendTitle;
                        }
                    }
                } else {
                    if (this.image == '../../../static/img/icon_xinjian_picture@2x.png') {
                        this.$message.warning('请添加图片!');
                        return;
                    } else {
                        var list = {
                            token: sessionStorage.token,
                            messageType: this.appenMessageType,
                            logo: this.image
                        }
                        if (this.appendTitle != '') {
                            list.title = this.appendTitle;
                        }
                    }
                }
                this.$store.commit('showLoading');
                this.addSystemMessage(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('添加成功!');
                        this.getMsg(this.currentPage);
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
                this.hideAppendMsg();
            },
            // 发送消息
            sendMessage() {
                let list = {
                    token: sessionStorage.token,
                    id: this.messageId,
                    sendType: this.sendType
                }
                // 发送时间
                if (this.sendTimeType == 1) {
                    list.type = 1;
                } else {
                    list.type = 3;
                    let now = Date.now(),
                        date = Date.parse(new Date(this.selectTime));
                    if (now >= date) {
                        this.$message.warning('时间不能小于当前时间!');
                    } else {
                        let passDate = this.formatDate(date).replace(/-/g, '/').split(':');
                        list.sendTime = passDate[0] + ':' + passDate[1];
                    }
                }
                let params = {};
                // 发送人群
                if (this.sendPeopleType == 2) {
                    list.target = this.deviceType;
                    if (this.sexType != '' || this.checkedIntersets != '' || this.addressType != '') {
                        params.sex = this.sexType;
                        params.address = this.addressType[1] == undefined ? '':this.addressType[1];
                        params.interest = this.checkedIntersets;
                    }
                } else if (this.sendPeopleTyp == 1) {
                    params.silenceUser = true;
                } else {
                    list.target = 3;
                }
                params = JSON.stringify(params);
                list.params = params;
                this.$store.commit('showLoading');
                this.sendSystemMessage(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    this.hideSendBox();
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('发送成功!');
                        this.getMsg(this.currentPage);
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            hideSendBox() {
                this.sendWraper = this.layer = false;
                this.sendTimeType = 1;
                this.sendPeopleType = 3;
                this.sendType = 5;
                this.checkedIntersets = [];
            },
            openAppendBox() {
                this.image = '../../../static/img/icon_xinjian_picture@2x.png';
                this.appendTitle = this.textarea = '';
                this.isShowAppendBox = this.layer = true;
            },
            openSendBox(i) {
                this.sendWraper = this.layer = true;
                this.messageId = this.tableData[i].id;
            },
            hideAppendMsg() {
                this.layer = this.isShowAppendBox = false;
            },
            tabBtnChange(i) {
                if (i == 1) {
                    this.isTxt = this.isTabButton1 = true;
                    this.isImg = this.isTabButton2 = false;
                    this.appenMessageType = 1;
                } else {
                    this.isTxt = this.isTabButton1 = false;
                    this.isImg = this.isTabButton2 = true;
                    this.appenMessageType = 2;
                }
            },
            // 打开消息详情
            openDetailMsg(i) {
                let content = this.tableData[i].content;
                this.$alert(content, '消息详情', {
                    confirmButtonText: '确定'
                });
            },
            handleCheckAllChange(event) {
                this.checkedIntersets = event.target.checked ? this.interests : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.interests.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.interests.length;
            },
            selectFile(){
                document.querySelector('#upload').click();
            },
            ...mapActions(['getSystemMsg', 'deletSystemMsg', 'uploadFile', 'addSystemMessage', 'sendSystemMessage', 'getIntrestlist'])
        },
        created: function() {
            this.getMsg(1);
            this.getIntrest();
        },
        filters: {
            // 格式化日期
            formatDate(date) {
                if (date != null) {
                    let y, m, d, h, i, s,
                        t = new Date(parseInt(date));
                    y = t.getFullYear()
                    m = t.getMonth() + 1
                    d = t.getDate()
                    h = t.getHours()
                    i = t.getMinutes()
                    s = t.getSeconds()
                    return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
                } else {
                    return '';
                }
            },
            messageType(val) {
                return val == '1' ? '文字消息' : '图片消息';
            }
        }
    }
</script>

<style scoped>
    #app {
        position: relative;
    }
    ul {
        margin: 0;
    }
    .table-wraper {
        width: 100%;
        background-color: #fff;
        border-radius: 5px;
    }
    .el-table {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    .accountCheck {
        margin-bottom: 5px;
    }
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 4%;
    }
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 8%;
    }
    .dataList li:nth-child(2) {
        padding-left: 8px;
    }
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 15%;
    }
    .listTitle li:nth-child(4),
    .dataList li:nth-child(4) {
        width: 20%;
    }
    .listTitle li:nth-child(5),
    .dataList li:nth-child(5) {
        width: 12%;
    }
    .listTitle li:nth-child(6),
    .dataList li:nth-child(6) {
        width: 12%;
    }
    .listTitle li:nth-child(7),
    .dataList li:nth-child(7) {
        width: 13%;
    }
    .listTitle li:nth-child(8),
    .dataList li:nth-child(8) {
        width: 16%;
        border-right: none;
    }
    .dataList li:nth-child(7) {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #35C885;
        cursor: pointer;
        padding: 0 10px;
    }
    .sendWraper {
        width: 700px;
        height: 570px;
    }
    .sendWraper .bomb_content {
        height: 422px;
    }
    h2 {
        text-align: center;
        color: rgb(109, 148, 189);
        border-bottom: 1px solid #ccc;
        height: 60px;
        line-height: 60px;
        z-index: 1000;
        margin: 0;
        font-size: 20px;
    }
    .timeType {
        height: 70px;
        margin-top: 70px;
    }
    .peopleInfo {
        width: 100%;
        padding: 10px;
        margin-top: 30px;
    }
    .peopleInfo p {
        width: 100%;
        margin: 0;
        margin-bottom: 10px;
    }
    .selectInterest {
        width: 100%;
    }
    .selectInterest p {
        float: inherit;
        text-align: left;
        padding-left: 33px;
        margin-top: 5px;
    }
    .interestBox {
        width: 90%;
        margin-left: 5%;
        padding: 10px 0;
        position: relative;
    }
    .checkList {
        width: 25%;
        text-align: left;
        padding-left: 9%;
    }
    .el-checkbox+.el-checkbox {
        margin: 0;
    }
    label {
        margin: 0;
    }
    .sendType {
        margin-top: 35px;
    }
    .btnBox {
        width: 100%;
        position: absolute;
        bottom: 10px;
    }
    .appendBox {
        width: 700px;
        height: 600px;
    }
    .appendBox .bomb_content {
        height: 452px;
    }
    .tabSelect {
        height: 60px;
        width: 100%;
        text-align: center;
        margin: 15px 0;
        border-bottom: 1px solid #ddd;
    }
    .tabSelect button {
        width: 30%;
        height: 45px;
        line-height: 45px;
        border: none;
        color: #3C5570;
        margin-right: -4px;
        background-color:#fff;
        border:1px solid #3C5570;
    }
    .tabSelect button:nth-child(1) {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .tabSelect button:nth-child(2) {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .tabButton {
        background-color: #3C5570 !important;
        color:#fff !important;;
    }
    .inputTxt {
        width: 90%;
        margin-left: 5%;
        height: 290px;
        margin-top: 10px;
        padding: 20px 0 0 55px;
    }
     .inputImg{
        text-align:left;
        height:100px;
        line-height:100px;
        margin:80px 0 0 0;
     }
    .appendBox p .el-input {
        width: 60%;
    }
    .previewImage {
        width: 100px;
        border: none;
        margin: 0 0 0 15px;
    }
    .userInfoClose {
        position: absolute;
        top: 25px;
        right: 50px;
        cursor: pointer;
    }
    .search {
        width: 100%;
        padding: 8px 20px 0 0;
        background-color: #efefef;
        height: 48px;
        margin-bottom: 10px
    }
    .selectOption {
        float: right;
        text-align: right;
    }
    .checkBtn {
        width: 96px;
    }
    .tabTitle{
        text-align:left;
    }
</style>
